export default `
  <style>
    .page-wrapper {
      margin: 0;
      padding: 0;
    }
    .page-wrapper {
      width: 100%;
      background-color: #fff;
      color: #fff;
      font-size: 30px;
    }
    .page-wrapper .tabs {
      width: 100%;
      box-sizing: border-box;
      border-bottom: 1px solid #dedede;
    }
    .page-wrapper .tabs .tab-item {
      width: 25%;
      float: left;
      padding: 15px 0;
      transition: all .2s;
      text-align: center;
      color: #000;
      background-color: #fff;
    }

    .page-wrapper .tabs .tab-item.active {
      background-color: #000;
      color: #fff;
    }
    .page-wrapper .tabs-page {
      clear: both;
      width: 100%;
      height: 300px;
      position: relative;
    }
    .page-wrapper .tabs-page .page-item {
      font-size: 100px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: #000;
      display: none;
    }
    .page-wrapper .tabs-page .page-item.active {
      display: block;
    }
  </style>
  <div class="page-wrapper">
    <div class="tabs">
      <div class="tab-item active">tab1</div>
      <div class="tab-item">tab2</div>
      <div class="tab-item">tab3</div>
      <div class="tab-item">tab4</div>
    </div>
    <div class="tabs-page">
      <div class="page-item active">page1</div>
      <div class="page-item">page2</div>
      <div class="page-item">page3</div>
      <div class="page-item">page4</div>
    </div>
    <article style="display: none;">
      <section>
        <p>

        </p>
      </section>
    </article>
  </div>
`;
